<%@include file="../header.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<link rel="stylesheet" href="${pageContext.request.contextPath}/plugs/zoom/css/ShopShow.css" type="text/css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugs/zoom/css/MagicZoom.css" type="text/css"/>
<script src="${pageContext.request.contextPath}/plugs/zoom/js/MagicZoom.js" type="text/javascript"></script>

<ul class="breadcrumb">
    <li>
        <a href="#">首页</a>
    </li>
    <li>
        <a href="#">${goodVO.cateName}</a>
    </li>
    <li class="active">
        ${goodVO.goodsName}
    </li>
</ul>

<div class="row">
    <div class="col-md-4">

        <!-- 代码开始 -->
        <div id="tsShopContainer">
            <div id="tsImgS">
                <a href="${pageContext.request.contextPath}${goodVO.goodsPic}" title="Images"
                   class="MagicZoom" id="MagicZoom">
                    <img src="${pageContext.request.contextPath}${goodVO.goodsPic}"/>
                </a>
            </div>
            <div id="tsPicContainer">
                <div id="tsImgSArrL" onclick="tsScrollArrLeft()"></div>
                <div id="tsImgSCon">
                    <ul>
                        <c:forEach items="${goodVO.picList}" var="pic">
                            <li onclick="showPic(0)" rel="MagicZoom">
                                <img height="42" width="42"
                                     src="${pageContext.request.contextPath}${pic.picUrl}"
                                     tsImgS="${pageContext.request.contextPath}${pic.picUrl}"/>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
                <div id="tsImgSArrR" onclick="tsScrollArrRight()"></div>
            </div>
            <%--<img class="MagicZoomLoading" width="16" height="16"
                 src="${pageContext.request.contextPath}/plugs/zoom/images/loading.gif" alt="Loading..."/>--%>
        </div>
        <!-- 引入放大镜效果脚本 -->
        <script src="${pageContext.request.contextPath}/plugs/zoom/js/ShopShow.js"></script>
        <!-- 代码结束 -->
    </div>


    <div class="col-md-8">
        <h3>${goodVO.goodsName}</h3>
        <div class="panel panel-default">
            <div class="panel-body bg_goodsdetail">
                <p>促销价：<span class="price_red "><small>￥</small>${goodVO.goodsPrice}</span></p>
                <p>原价：<span class="price"><small>￥</small>${goodVO.goodsDiscount}</span></p>
                <p>已售出 <span style="color:gray">${goodVO.goodsSales} </span>件</p>
            </div>
        </div>

        <form id="fm_goods" class="form-inline" role="form" method="post">
            <!--加隐藏域-->
            <input hidden type="text" value="${goodVO.goodsId}" name="goodId">
            <c:forEach items="${goodVO.goodsDetailTypeList}" var="gdt">
                <div class="row row_style">
                    <div class="col-md-12">
                        <label>${gdt.typeName}：</label>
                        <div class="btn-group" role="group" id="btn_group_${gdt.typeId}">
                            <c:forEach items="${goodVO.goodsDetailMap[gdt.typeId]}" var="gdm">
                                <button type="button"
                                        class="btn btn-default btn-xs ${gdt.typeId}"
                                        id="btn_${gdm.contentId}"
                                        onclick="btnSelect(${gdm.contentId},${gdt.typeId})">${gdm.content}
                                </button>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </c:forEach>

            <div class="row row_style">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>数量：</label>
                        <div class="input-group input-group-sm col-xs-4">
                            <input class="form-control" id="goodsSales" name="goodsSales" type="number" value="1"
                                   min="1"/>
                        </div>
                    </div>
                </div>
            </div>

        </form>

        <div class="row row_style">
            <div class="col-md-12">

                <p class="p_height">运费：<small>￥</small>${goodVO.goodsPostalfee}</p>
                <p>
                    <button class="btn btn-primary btn-sm" type="submit" onclick="pay('${pageContext.request.contextPath}','${goodVO.goodsId}')">
                        立即购买
                    </button>
                    <button class="btn btn-primary btn-sm" type="button"
                            onclick="add('${pageContext.request.contextPath}','${goodVO.goodsId}')">
                        加入购物车
                    </button>
                </p>
            </div>
        </div>
    </div>
</div>

<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">商品详情</h3>
            </div>
            <div class="panel-body">
                <dl class="dl-horizontal">
                    <dt>宝贝详情</dt>
                    <dd>${goodVO.goodsDisc}</dd>
                    <dt>产地</dt>
                    <dd>${goodVO.goodsOrigin}</dd>
                </dl>
                <hr>
                <div style="margin-top:20px" class="text-center">
                    <c:forEach items="${goodVO.picList}" var="pic">
                        <div>
                            <img alt="暂无图片" src="${pageContext.request.contextPath}${pic.picUrl}"/>
                        </div>
                    </c:forEach>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    function btnSelect(contentid, typeid) {
        $("." + typeid).removeClass("btn-info");
        $("#btn_" + contentid).addClass("btn-info");
    }

    function getData(goodId) {
        let group = document.getElementsByClassName('btn-group');
        let goodsSales = document.getElementById("goodsSales").value;
        let arr = [];
        let typeName = [];

        for (let g of group) {
            let children = g.children;
            for (let c of children) {
                if (c.className.search('btn-info') != -1) {
                    arr.push(c.id.substr(4, c.id.length))
                    typeName.push(c.innerHTML.replace(/[ ]/g, "").replace(/[\r\n]/g, ""));
                }
            }
        }
        let d = {
            goodId: goodId,
            typeList: arr,
            typeName: typeName,
            goodsSales: goodsSales
        }
        return d;
    }

    function add(baseurl, goodId) {
        let data = getData(goodId);
        $.post(baseurl + "/goods/addCart.action", JSON.stringify(data), function (result) {
            if (result.success) {
                $("#cartBadge").html(result.cartnum);
                $("#cartTitle").html("添加成功");
                $("#cart_msg").html("已将商品加入到购物车。");
            } else {
                $("#cartTitle").html("添加失败");
                $("#cart_msg").html("请重新选择商品。");
            }
            $("#cartModal").modal('show');
            $("#cart_msg").show();
            $("#cart_tab").hide();
        }, "json");
    }

    function pay(baseurl, goodId) {
        let data = getData(goodId);
        $.post(baseurl + "/order/payGoods", JSON.stringify(data), function (result) {
            if (result.success) {
                window.location.replace(baseurl + '/order/confirmOrder.action?goodId='+goodId);
            }
        }, "json");
    }

</script>


<%@include file="../footer.jsp" %>
